<script setup>
import { ref, watch } from 'vue'
import { fetchIndicesData } from '../api/weatherAPI'
import { useCityStore } from '../stores/cityStore'
import { useRouter } from 'vue-router' //引入路由
const cityStore = useCityStore()
const router = useRouter() //获取路由实例

watch(
  //监听数据源
  () => cityStore.location,
  //回调函数
  () => {
    getData(cityStore.location.id)
  },
  //即时回调
  { immediate: true }
)
const indiceDaily = ref([])
const indexTypes = [
  { id: '1', name: '运动指数', icon: 'run-line' },
  { id: '2', name: '洗车指数', icon: '洗车' },
  { id: '3', name: '穿衣指数', icon: '衣服' },
  { id: '4', name: '钓鱼指数', icon: '钓鱼' },
  { id: '5', name: '紫外线指数', icon: '烈日' },
  { id: '6', name: '旅游指数', icon: '旅游' },
  { id: '7', name: '过敏指数', icon: '过敏' },
  { id: '8', name: '舒适度指数', icon: '舒适度' },
  { id: '9', name: '感冒指数', icon: '感冒药物' },
  { id: '10', name: '空气污染扩散条件指数', icon: '空气质一般' },
  { id: '11', name: '空调开启指数', icon: '空调' },
  { id: '12', name: '太阳镜指数', icon: '太阳镜' },
  { id: '13', name: '化妆指数', icon: '口红' },
  { id: '14', name: '晾晒指数', icon: '晾晒' },
  { id: '15', name: '交通指数', icon: '高速' },
  { id: '16', name: '防晒指数', icon: '防晒' },
]
async function getData(locationID) {
  const res = await fetchIndicesData(locationID, 0)
  console.log(res)
  indiceDaily.value = res.daily
}
//生活指数列表项的单击事件
function selectItem(item) {
  // console.log(item.type)
  // router.push('/livingdetail/' + item.type)  //方法1字符串路径
  // router.push({ name: 'livingdetail', params: { id: item.type } }) //方法3命名的路由
  router.push(`/livingdetail/${item.type}`) //方法1模板字符串写法
  // router.push({ path: `/livingdetail/${item.type}` }) //方法2带路径的对象，模板字符串
  // router.push({ path: '/livingdetail/' + item.type }) //方法2带路径的对象
}
function getIconPath(type) {
  const iconName = indexTypes.find((item) => item.id === type)?.icon
  if (!iconName) return ''
  return new URL(`../img/${iconName}.png`, import.meta.url).href
}
</script>
<template>
  <div class="indice">
    <h1>生活指数</h1>
    <ul>
      <li v-for="(item, i) in indiceDaily" :key="i" @click="selectItem(item)">
        <div class="icon-container">
          <img :src="getIconPath(item.type)" :alt="item.name" class="icon" />
        </div>
        <p>{{ item.name }}</p>
        <p>{{ item.category }}</p>
      </li>
    </ul>
  </div>
</template>
<style scoped>
.indice {
  color: black;
  background-color: #efecef;
  border-radius: 1rem;
  padding: 2rem;
}
.indice > h1 {
  text-align: center;
}
.indice > ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}
.indice > ul > li {
  background-color: #f1f1f1;
  border-radius: 0.5rem;
  padding: 1rem;
  cursor: pointer;
}
.indice > ul > li > p:nth-of-type(1) {
  font-weight: bolder;
}
.indice > ul > li > p:nth-of-type(2) {
  font-size: 0.8rem;
  color: darkgray;
}
.icon-container {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}
.icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
</style>